<template>
  <div class="app-container home-page">
    <div class="home-left">
      <h3>常用功能</h3>
      <el-row class="quick">
        <el-col :span="7" @click.native="createMeet">
          <svg-icon icon-class="addmeet"></svg-icon>
          <h5>创建会议</h5>
        </el-col>
        <el-col :span="10" @click.native="createSchedule">
          <svg-icon icon-class="addschedule"></svg-icon>
          <h5>创建日程</h5>
        </el-col>
        <el-col :span="7" @click.native="createTrain">
          <svg-icon icon-class="addtrain"></svg-icon>
          <h5>创建培训</h5>
        </el-col>
      </el-row>
      <h3>我的日程</h3>
      <ul class="my-schedule">
        <li>
          最近七天即将参与的会议：<i>{{ staticData.meet }}</i>
        </li>
        <li>
          最近七天需要参加的培训：<i>{{ staticData.train }}</i>
        </li>
        <li>
          最近七天待办的个人日程：<i>{{ staticData.schedule }}</i>
        </li>
      </ul>
      <h3 style="margin-bottom:0px;position:relative">
        共享日程
        <span class="owner">
          (当前日程所属人: <b>{{ viewUser.name }}</b
          >)
        </span>
      </h3>
      <el-tabs v-model="shareTab">
        <el-tab-pane label="共享人" name="share"></el-tab-pane>
        <el-tab-pane label="所有人员" name="all"></el-tab-pane>
      </el-tabs>
      <div class="user-list-container" :style="{ height: userListHeight + 'px' }">
        <ul class="share-list" v-show="shareTab === 'share'">
          <li :class="viewUser.code === user.code ? 'on' : ''">
            <i class="el-icon-user-solid"></i>
            {{ user.name }}(自己)
            <a @click="changeViewUser(user.code, user.name)" v-show="viewUser.code !== user.code">[切换]</a>
          </li>
          <li v-for="item in shareList" :key="item.sourceusercodes" :class="viewUser.code === item.sourceusercodes ? 'on' : ''">
            <i class="el-icon-user-solid"></i>
            {{ item.sourceusernames }}{{ item.sourceusercodes === user.code ? '(自己)' : '[' + item.sourceusercodes + ']' }}
            <a @click="changeViewUser(item.sourceusercodes, item.sourceusernames)" v-show="viewUser.code !== item.sourceusercodes">[切换]</a>
          </li>
          <li style="text-align:right;border-bottom:none">
            <el-button type="text" icon="el-icon-setting" style="padding:0" @click="$router.push({ path: '/work/base/basePermissionManage' })">管理我的共享人</el-button>
            <tl-help marginLeft="0">
              只有对方有意愿与本人共享其日程，并将本人设为共享人之后，这里方可显示对方姓名。
            </tl-help>
          </li>
        </ul>
        <el-collapse accordion class="user-collapse" value="2" v-show="shareTab === 'all'">
          <el-collapse-item name="2">
            <template slot="title">
              关注的人
              <tl-help marginLeft="5px">
                单击点亮对方姓名前的五角星即可关注，再次点击可取消关注。
              </tl-help>
            </template>
            <ul class="share-list">
              <li v-for="item in markUserList" :key="'mark' + item.code" :class="viewUser.code === item.code ? 'on' : ''">
                <svg-icon :icon-class="markUserList.findIndex((m) => m.code === item.code) > -1 ? 'star_on' : 'star'" :class="markUserList.findIndex((m) => m.code === item.code) > -1 ? 'mark' : ''" @click.native="markUser(item.code, item.name)" title="点击关注/取消关注"></svg-icon>
                {{ item.name }}{{ item.code === user.code ? '(自己)' : '[' + item.code + ']' }}
                <a @click="changeViewUser(item.code, item.name)" v-show="viewUser.code !== item.code">[切换]</a>
              </li>
            </ul>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              本部门人员
              <tl-help marginLeft="5px">
                此处仅显示本人所在二级部门所有人员（包括已关注人员），按姓氏首字母升序。
              </tl-help>
            </template>
            <ul class="share-list">
              <li v-for="item in deptUserList" :key="'dept' + item.code" :class="viewUser.code === item.code ? 'on' : ''">
                <svg-icon :icon-class="markUserList.findIndex((m) => m.code === item.code) > -1 ? 'star_on' : 'star'" :class="markUserList.findIndex((m) => m.code === item.code) > -1 ? 'mark' : ''" @click.native="markUser(item.code, item.name)" title="点击关注/取消关注"></svg-icon>
                {{ item.name }}{{ item.code === user.code ? '(自己)' : '[' + item.code + ']' }}
                <a @click="changeViewUser(item.code, item.name)" v-show="viewUser.code !== item.code">[切换]</a>
              </li>
            </ul>
          </el-collapse-item>
          <el-collapse-item name="1">
            <template slot="title">
              检索所有人
              <tl-help marginLeft="5px">
                可全员检索，此处仅显示最近检索过的10位用户名单，且记录仅能单机暂存，更换电脑将无法同步。
              </tl-help>
            </template>
            <el-button type="text" icon="el-icon-search" size="mini" @click="openSearch">检索用户</el-button>
            <ul class="share-list">
              <li v-for="item in usedUserList" :key="'recent' + item.code" :class="viewUser.code === item.code ? 'on' : ''">
                <svg-icon :icon-class="markUserList.findIndex((m) => m.code === item.code) > -1 ? 'star_on' : 'star'" :class="markUserList.findIndex((m) => m.code === item.code) > -1 ? 'mark' : ''" @click.native="markUser(item.code, item.name)" title="点击关注/取消关注"></svg-icon>
                {{ item.name }}{{ item.code === user.code ? '(自己)' : '[' + item.code + ']' }}
                <a @click="changeViewUser(item.code, item.name)" v-show="viewUser.code !== item.code">[切换]</a>
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="home-right">
      <div class="calender-header">
        <div class="left">
          <div v-for="color in markColorList" class="color-item" :key="color.id" @click="filterType(color.code)">
            <span class="color-block" :style="{ background: color.name }">&nbsp;</span>
            <span :style="{ textDecoration: filterList.findIndex((m) => m === color.code) > -1 ? 'line-through' : '' }">{{ color.code === '0' ? '我创建的' : color.code === '1' ? '我参与的' : '我关注的' }}</span>
          </div>
          <tl-help marginLeft="0px"> <b style="text-decoration: underline;">我创建的</b>是本人所建日程， <b style="text-decoration: underline;">我参与的</b>是他人所建日程， <b style="text-decoration: underline;">我关注的</b>是通过单击点亮日程详情页的五角星关注到的日程。 <br />单击三个标签可实现隐藏或显示相应日程切换，拖拽日历中本人所建日程可快速更换日期/时间。 </tl-help>
        </div>
        <div class="center">
          <el-button type="text" icon="el-icon-arrow-left" size="mini" @click="prev"></el-button>
          <el-date-picker :picker-options="datePickerOption" :title="calendarParam.title" :clearable="false" :editable="false" v-model="calendarParam.titleValue" :format="calendarParam.titleFormat" size="small" style="width:135px;" value-format="yyyy-MM-dd" :type="calendarParam.titleType" placeholder="选择月" @change="changeCalendarDate"> </el-date-picker>
          <el-button type="text" icon="el-icon-arrow-right" size="mini" @click="next"></el-button>
        </div>
        <div class="right">
          <!-- <el-button icon="el-icon-refresh" type="primary" circle @click="doRefresh" size="mini"></el-button> -->.
          <el-button type="default" size="mini" @click="today">今天</el-button>
          <el-radio-group v-model="calendarParam.currentView" @change="changeView" size="mini">
            <el-radio-button label="dayGridMonth">月</el-radio-button>
            <el-radio-button label="timeGridWeek">周</el-radio-button>
            <el-radio-button label="timeGridDay">日</el-radio-button>
            <el-radio-button label="listWeek">列表</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="calendar-container" :style="{ height: calendarHeight + 'px', minHeight: '578px' }">
        <tl-calendar ref="calendar" @dateClick="dateClick" @eventClick="eventClick" @eventSearch="eventSearch" @eventTimeChange="eventTimeChange" @datesSet="datesSet"></tl-calendar>
      </div>
      <tl-edit ref="editForm" :transModel="transModel" :dateInfo="dateInfo" :ownerUser="viewUser" @closeAll="doRefresh" @refresh="doRefresh"></tl-edit>
      <div class="calendar-event-block" :style="{ top: eventBlock.top + 'px', left: eventBlock.left + 'px' }">
        <tl-calendar-edit ref="calendarEditForm" :ownerUser="viewUser" :dateInfo="dateInfo" @refresh="doRefresh" @more="openMore"></tl-calendar-edit>
        <!-- <tl-calendar-view ref="calendarViewForm"></tl-calendar-view> -->
        <tl-meet-edit @refresh="doRefresh" ref="meetEdit"></tl-meet-edit>
      </div>
      <tl-ref-user :singleSelect="true" :isDisplayDefaultElement="false" ref="userRef" @confirm="addUsedUser" :externalQueryParam="{qry_whereSql:'EXTENDFIELD1 IS NOT NULL AND ENABLED = 1',qry_nodimission:'0'}" ></tl-ref-user>
    </div>
  </div>
</template>

<script>
import tlCalendar from '@/components/common/calendar'
import tlEdit from './edit'
import tlCalendarEdit from './calendarEdit'
import tlCalendarView from './calendarView'
import tlMeetEdit from '../../meet/meetManage/edit'
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { mixin_base } from '@tapui/mixins/mixin_base'
import { formatDate } from '@tapui/utils/date'
const { body } = document
import { queryDataCode } from '@tapui/api/dataCode'
export default {
  mixins: [mixin_base],
  components: { tlCalendar, tlEdit, tlCalendarEdit, tlCalendarView, tlMeetEdit },
  data() {
    return {
      url: {
        querySchedule: '/work/schedule/queryScheduleList',
        changeCalendarTime: '/work/schedule/changeCalendarTime',
        queryHomeStatic: '/work/schedule/queryHomeStatic',
        queryShareList: '/base/permissionManage/querySharers',
        queryDeptUserList: '/base/permissionManage/querySelfDeptUser',
        mark: '/base/operateRecord/operateState',
        queryMarkUserList: 'base/operateRecord/queryList'
      },
      calendarHeight: 500,
      userListHeight: 110,
      events: [],
      markColorList: [],
      dateInfo: null,
      eventBlock: {
        top: 0,
        left: 0
      },
      viewUser: {
        code: '',
        name: '',
        isShare: false,
        isView: false
      },
      filterList: [],
      transModel: null,
      // 共享人
      shareTab: 'share',
      shareList: [],
      // 所有人
      usedUserList: [],
      // 本部门的人
      deptUserList: [],
      // 关注的人
      markUserList: [],
      // 日历
      calendarParam: {
        instance: null,
        currentView: 'dayGridMonth',
        start: '',
        end: '',
        title: '',
        titleValue: '',
        titleType: 'month',
        titleFormat: 'yyyy-MM'
      },
      staticData: {
        meet: 0,
        train: 0,
        schedule: 0
      },
      datePickerOption: {
        firstDayOfWeek: 1
      }
    }
  },
  computed: {
    theme() {
      return this.$store.getters.theme
    }
  },
  methods: {
    // 初始化数据
    loadData() {
      // this.loadEvents({ qry_usercode: this.user.code })
    },
    // 日历事件
    eventSearch(info, successCallback, failureCallback) {
      getAction(this.url.querySchedule, {
        qry_usercode: this.viewUser.code,
        qry_range: 1,
        qry_begintime: formatDate(new Date(info.startStr), 'yyyy-MM-dd HH:mm:ss'),
        qry_endtime: formatDate(new Date(info.endStr), 'yyyy-MM-dd HH:mm:ss'),
        qry_filtertype: this.filterList.join(',')
      })
        .then((res) => {
          if (res.success) {
            let events = []
            res.result.forEach((item) => {
              events.push({
                id: item.id,
                title: item.name,
                start: item.begintime,
                end: item.endtime,
                color: item.dispmarkcolor,
                durationEditable: item.self,
                startEditable: item.self
                // fullObj: item
              })
            })
            successCallback(events)
          } else {
            this.$tap.message('获取日程失败:' + res.message, 'error')
            failureCallback('获取日程失败:' + res.message, 'error')
          }
        })
        .catch((_) => {
          this.$tap.message('获取日程失败', 'error')
          failureCallback('获取日程失败', 'error')
        })
    },
    // 点击日历上某个日期框时触发
    dateClick(info) {
      if (this.viewUser.isView) {
        this.$refs['calendarEditForm'].visible = false
        return
      }
      this.dateInfo = info
      this.$refs['calendarEditForm'].isAdd = true
      this.$refs['calendarEditForm'].visible = true
      this.$refs['calendarEditForm'].disableEditSubmit = false
      this.$nextTick((_) => {
        this.chargeCalendarEditPosition(info)
        this.$refs['calendarEditForm'].open()
      })
    },
    /** 打开新增对话框实现 */
    openAddDialog() {
      this.$refs['editForm'].isAdd = true
      this.$refs['editForm'].visible = true
      this.$refs['editForm'].disableEditSubmit = false
    },
    // 点击日历上某个日程时触发
    eventClick(info) {
      this.$refs['calendarEditForm'].id = info.event.id
      this.$refs['calendarEditForm'].isAdd = false
      this.$refs['calendarEditForm'].visible = true
      this.$refs['calendarEditForm'].disableEditSubmit = false
      this.$nextTick((_) => {
        this.chargeCalendarEditPosition(info)
        this.$refs['calendarEditForm'].open()
      })
    },
    eventMouseEnter(info) {
      this.$refs['calendarViewForm'].visible = true
      this.$refs['calendarViewForm'].model = info.event.extendedProps.fullObj
      this.$nextTick((_) => {
        this.chargeCalendarViewPosition(info)
        this.$refs['calendarEditForm'].loaded()
      })
    },
    eventMouseLeave(info) {
      this.$refs['calendarViewForm'].visible = false
    },
    // 针对日历工具栏的二次开发
    changeView() {
      this.calendarParam.instance.changeView(this.calendarParam.currentView)
    },
    prev() {
      this.calendarParam.instance.prev()
    },
    today() {
      this.calendarParam.instance.today()
    },
    next() {
      this.calendarParam.instance.next()
    },
    // 保存完刷新页面
    doRefresh() {
      this.$refs.calendar.refresh()
      this.queryStatic()
    },
    openMore(model) {
      this.transModel = model
      if (model.id) {
        this.openEditDialog(model.id)
      } else {
        this.openAddDialog()
      }
    },
    chargeCalendarEditPosition(info) {
      let { clientWidth: dayWidth, clientHeight: dayHeight } = info.dayEl || info.el
      let { clientWidth: formWidth, clientHeight: formHeight } = this.$refs.calendarEditForm.$el
      let { width: docWidth, height: docHeight } = body.getBoundingClientRect()
      let top = info.jsEvent.clientY + 10
      let left = info.jsEvent.clientX + 10

      // 正常情况下，显示在日期框的右边；若右侧超出屏幕，则显示在左侧；若下方超出屏幕，则显示在上方
      if (info.view.type === 'dayGridMonth') {
        left = left - info.jsEvent.offsetX
        top = top - info.jsEvent.offsetY
        if (top + formHeight > docHeight) {
          top = docHeight - formHeight - 20
        }
        if (left + dayWidth + formWidth > docWidth) {
          left = left - formWidth - 20
        } else {
          left = left + dayWidth
        }
      } else {
        if (left + formWidth > docWidth) {
          left = left - formWidth - 20
        }
        if (top + formHeight > docHeight) {
          top = docHeight - formHeight - 20
        }
      }

      this.eventBlock.top = top
      this.eventBlock.left = left
    },
    chargeCalendarViewPosition(info) {
      let { clientWidth: dayWidth, clientHeight: dayHeight } = info.dayEl || info.el
      let { clientWidth: formWidth, clientHeight: formHeight } = this.$refs.calendarEditForm.$el
      let { width: docWidth, height: docHeight } = body.getBoundingClientRect()
      let top = info.jsEvent.clientY + 10
      let left = info.jsEvent.clientX + 10

      if (left + formWidth > docWidth) {
        left = left - formWidth - 20
      }
      if (top + formHeight > docHeight) {
        top = docHeight - formHeight - 20
      }

      this.eventBlock.top = top
      this.eventBlock.left = left
    },
    /** 打开编辑对话框实现 */
    openEditDialog(id) {
      this.$refs['editForm'].id = id
      this.$refs['editForm'].isAdd = false
      this.$refs['editForm'].visible = true
      this.$refs['editForm'].disableEditSubmit = false
    },
    // 用户拖动事件改变日期
    eventTimeChange(dropInfo) {
      postAction(this.url.changeCalendarTime, {
        id: dropInfo.event.id,
        begintime: formatDate(dropInfo.event.start, 'yyyy-MM-dd HH:mm:ss'),
        endtime: formatDate(dropInfo.event.end, 'yyyy-MM-dd HH:mm:ss')
      }).then((res) => {
        this.$tap.message('修改日期成功')
      })
    },
    resizeHandler() {
      // 134是页面多余位置，42是工具栏的高度
      this.calendarHeight = body.getBoundingClientRect().height - 176
      this.userListHeight = this.calendarHeight - 396
    },
    // 日历切换时
    datesSet(dateInfo) {
      this.calendarParam.currentView = dateInfo.view.type
      this.calendarParam.title = dateInfo.view.title
      if (dateInfo.view.type.indexOf('Day') > -1) {
        this.calendarParam.titleType = 'date'
        this.calendarParam.titleFormat = 'yyyy-MM-dd'
        this.calendarParam.titleValue = formatDate(dateInfo.view.currentStart, 'yyyy-MM-dd')
      } else if (dateInfo.view.type.indexOf('Month') > -1) {
        this.calendarParam.titleType = 'month'
        this.calendarParam.titleValue = formatDate(dateInfo.view.currentStart, 'yyyy-MM-dd')
        this.calendarParam.titleFormat = 'yyyy-MM'
      } else {
        this.calendarParam.titleType = 'week'
        this.calendarParam.titleFormat = 'yyyy第WW周'
        this.calendarParam.titleValue = formatDate(dateInfo.view.currentStart, 'yyyy-MM-dd')
      }
      this.calendarParam.start = formatDate(dateInfo.view.currentStart, 'yyyy-MM-dd HH:mm:ss')
      this.calendarParam.end = formatDate(dateInfo.view.currentEnd, 'yyyy-MM-dd HH:mm:ss')
    },
    filterType(code) {
      let index = this.filterList.findIndex((m) => m === code)
      if (index === -1) {
        this.filterList.push(code)
      } else {
        this.filterList.splice(index, 1)
      }
      this.doRefresh()
    },
    // 日历工具栏时间切换
    changeCalendarDate() {
      let date = this.calendarParam.titleValue
      this.calendarParam.instance.gotoDate(new Date(date))
    },
    createSchedule() {
      this.dateInfo = {
        dateStr: formatDate(new Date(), 'yyyy-MM-dd')
      }
      this.changeViewUser(this.user.code, this.user.name)
      this.transModel = null
      this.$refs['editForm'].isAdd = true
      this.$refs['editForm'].visible = true
      this.$refs['editForm'].disableEditSubmit = false
    },
    createMeet() {
      this.$refs['meetEdit'].isAdd = true
      this.$refs['meetEdit'].visible = true
      this.$refs['meetEdit'].disableEditSubmit = false
    },
    createTrain() {
      this.$tap.alert('该功能暂未开放！')
    },
    // 我的日程-统计信息
    queryStatic() {
      let now = new Date()
      let nowTime = now.getTime()
      let day = now.getDay()
      let oneDayTime = 24 * 60 * 60 * 1000
      let SundayTime = nowTime + 7 * oneDayTime
      getAction(this.url.queryHomeStatic, {
        qry_usercode: this.user.code,
        qry_begintime: formatDate(now, 'yyyy-MM-dd HH:mm:ss'),
        qry_endtime: formatDate(new Date(SundayTime), 'yyyy-MM-dd 23:59:59'),
        qry_range: '1'
      }).then((res) => {
        this.staticData = res.result
      })
    },
    // 共享日程-查询共享的用户
    queryShareList() {
      getAction(this.url.queryShareList, {
        qry_usercode: this.user.code
      }).then((res) => {
        if (res.success) {
          this.shareList = res.result
        }
      })
    },
    // 共享日程-查询本部门的用户
    queryDeptUserList() {
      getAction(this.url.queryDeptUserList).then((res) => {
        if (res.success) {
          this.deptUserList = res.result
        }
      })
    },
    // 共享日程-查询关注的用户
    queryMarkUser() {
      getAction(this.url.queryMarkUserList, {
        qry_sourcetype: 'scheduleViewMark',
        qry_usercode: this.user.code,
        qry_operatetype: 'attention',
        order: 'createon desc'
      }).then((res) => {
        if (res.success) {
          this.markUserList = []
          res.result.forEach((m) => {
            this.markUserList.push({
              code: m.sourceid,
              name: m.operateresult
            })
          })
        }
      })
    },
    // 共享日程-查询近期查询过的用户
    queryUsedUser() {
      let json = localStorage.getItem('scheduleViewRecentUserList')
      if (json) {
        this.usedUserList = JSON.parse(json)
      }
    },
    // 共享日程-切换查看的用户
    changeViewUser(code, name) {
      this.viewUser.code = code
      this.viewUser.name = name
      if (code === this.user.code) {
        this.viewUser.isShare = false
        this.viewUser.isView = false
      } else if (this.shareList.findIndex((m) => m.sourceusercodes === code) > -1) {
        this.viewUser.isShare = true
        this.viewUser.isView = false
      } else {
        this.viewUser.isShare = false
        this.viewUser.isView = true
      }
      this.$refs['calendarEditForm'].visible = false
      this.doRefresh()
    },
    // 共享日程-所有人员-检索人员
    openSearch() {
      this.$refs.userRef.openRefDialog()
    },
    // 共享日程-所有人员-检索人员
    addUsedUser(users) {
      if (users.length > 0) {
        if (this.usedUserList.findIndex((m) => m.code === users[0].code) === -1) {
          this.usedUserList = [{ name: users[0].name, code: users[0].code }, ...this.usedUserList]
          if (this.usedUserList.length > 10) {
            this.usedUserList.length = 10
          }
          localStorage.setItem('scheduleViewRecentUserList', JSON.stringify(this.usedUserList))
        }
        this.changeViewUser(users[0].code, users[0].name)
      }
    },
    // 关注所有人员
    markUser(code, name) {
      postAction(this.url.mark, { sourcetype: 'scheduleViewMark', sourceid: code, operatetype: 'attention', operateresult: name }).then((res) => {
        if (res.success) {
          if (res.message === 'on') {
            this.markUserList.push({
              code: code,
              name: name
            })
          } else {
            this.markUserList.splice(this.markUserList.findIndex((m) => m.code === code), 1)
          }
        }
      })
    },
    changeTodayColor(theme) {
      if (theme === '#D80A1E') {
        document.getElementsByTagName('body')[0].style.setProperty('--calendar-today-bg-color', 'rgba(216, 10, 30, 0.1)')
      } else if (theme === '#1E96E6') {
        document.getElementsByTagName('body')[0].style.setProperty('--calendar-today-bg-color', 'rgba(30,150,230, 0.1)')
      } else if (theme === '#0A966E') {
        document.getElementsByTagName('body')[0].style.setProperty('--calendar-today-bg-color', 'rgba(10,150,110, 0.1)')
      }
    }
  },
  created() {
    this.viewUser.code = this.user.code
    this.viewUser.name = this.user.name
    queryDataCode({ itemCodes: 'WorkColor' }).then((res) => {
      this.markColorList = res.result.WorkColor
    })
    this.loadData()
    this.resizeHandler()
    window.addEventListener('resize', this.resizeHandler)
    this.$nextTick((_) => {
      this.calendarParam.instance = this.$refs.calendar.$refs.calendar.getApi()
    })
    this.queryStatic()
    this.queryShareList()
    this.queryDeptUserList()
    this.queryMarkUser()
    this.queryUsedUser()
    this.changeTodayColor(this.theme)
  },
  watch: {
    theme(newVal, oldVal) {
      this.changeTodayColor(newVal)
    }
  }
}
</script>

<style lang="scss">
.calendar-event-block {
  position: fixed;
  width: 430px;
  z-index: 1003;
}
.calendar-event-block-view {
  position: fixed;
  width: 350px;
  z-index: 1002;
}
.calender-header {
  margin-bottom: 10px;
  height: 32px;
  line-height: 32px;
  position: relative;
  .left {
    position: absolute;
    left: 0;
    top: 0;
    height: 32px;
    line-height: 32px;
    z-index: 10;
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    line-height: 32px;
    z-index: 10;
    .el-radio-button--mini .el-radio-button__inner {
      padding: 7px 10px;
    }
  }
  .center {
    text-align: center;
    .el-button--mini {
      padding: 7px 0;
    }
  }

  .el-button--mini {
    padding: 7px;
  }
}
.user-collapse {
  .el-collapse-item__header {
    height: 32px;
    line-height: 32px;
    background: #fafafa;
    padding-left: 5px;
  }
  .el-button {
    margin-left: 10px;
    padding-bottom: 0;
  }
  .share-list {
    padding: 0 10px;
  }
  [class*=' el-icon-'],
  [class^='el-icon-'],
  svg {
    cursor: pointer;
  }
  svg.mark {
    color: rgb(244, 203, 93);
  }
}
</style>
<style scoped lang="scss">
.color-item {
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #777;
}
.color-block {
  height: 14px;
  width: 14px;
  padding: 0 2px;
  border-radius: 7px;
}
</style>
